/* ================================
   スマホのタップ時
================================ */

/* 追加文書 */
/* KS-903 法的手続き検索：追加スタイル */
#legalSearchSection {
  max-width: 900px;
  /* width: 100%; */
  margin: 24px auto;
  padding: 20px;
  border-radius: 16px;
  background: #f7f9fc;
  box-sizing: border-box;
width: 100%;
    /* min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 10; */
}

#legalSearchSection h2 {
  font-size: 1.25rem;
  margin-top: 0;
}

#legalSearchInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  margin-top: 8px;
  border: 1px solid #aab5c5;
  border-radius: 10px;
  font-size: 16px;
  background: white;
}

#legalSearchStatus {
  font-size: 0.9rem;
  color: #cb2626;
}

#legalSearchResults {
  display: grid;
  gap: 12px;
}

.legal-result {
  display: none;
  /* display: flex; */
  width: 100%;
  /* width: 240px;   横幅を広げる */
    /* height: 65px;   高さを縮める */
  padding: 15px;
  /* padding: 25px; */
  border: 1px solid #c8d6e8;
  /* border: none; */
  border-radius: 12px;
  /* border-radius: 12px; 50%から「12px」に変更（数字を変えると丸みが変わります） */
/* .legal-result { } */

  background: #1976d2;
  color: white;
  font-size: 1rem;
  /* font-size: 16px; */
  font-weight: bold;
  /* cursor: pointer; */
  justify-content: center;
  align-items: center;
  /* text-align: left; */
  text-align: center;
  cursor: pointer;
  box-shadow:
        0 8px 25px rgba(10, 182, 127, 0.25);

    transition:
        transform 0.25s ease,
        background 0.2s ease,
        box-shadow 0.25s ease;
}

.legal-result.is-visible {
  display: block;
  animation: legalFadeIn 0.65s ease both;
}

/* .legal-result:hover {
  background: #eaf2ff;
} */

/* ================================
   ホバー
================================ */

.legal-result:hover {

    transform: scale(1.08);

    background:
        linear-gradient(
            45deg,
            #ff0000,
            #ff9900,
            #ffee00,
            #00cc66,
            #00aaff,
            #6633ff,
            #ff00cc,
            #ff0000
        );

    background-size: 400% 400%;

    animation: rainbowButton 1.5s linear infinite;

    box-shadow:
        0 0 25px rgba(231, 2, 231, 0.5);
}
@keyframes legalFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-result.is-visible {
    animation: none;
  }
}